Войти
Назад

Компонент ввода даты DateInput

link
Скопировать прямую ссылку на статью

Общая информация

Компонент DateInput позволяет выбрать дату или указать её вручную

Поддерживаемые экраны

Компонент может быть задействован на экране типа:

Внешний вид компонента

В услуге

Рисунок6.png

В конструкторе

Рисунок7.png

Структура компонента DateInput

ВКУ JSON
№ В конструкторе Атрибут Тип Описание
1 Идентификатор компонента id string Уникальный идентификатор компонента в JSON
2 Имя компонента name string Допускается ввод любых данных для отображения в конструкторе, однако классическим видом является s1_с1, где номера — сгенерированные идентификаторы, s — экран, c — компонент
3 Заголовок компонента label string Название поля. Описывает, что пользователю необходимо ввести в отображаемое ему поле
4 Компонент обязателен для заполнения required boolean Признак обязательности ввода, либо выбора даты
5 Скрыть поле hidden boolean Если чекбокс установлен, то компонент не отображается на экране
6 Короткое поле isHalfWidth boolean Если чекбокс установлен, то ширина компонента уменьшается вдвое. Работает на ширине экрана свыше 576 px. На мобильных устройствах ширина не уменьшается
7 Только для чтения testReadOnly string Атрибут предназначен для отключения возможности пользователю вводить значение
8 Подсказка для поля hint string Серый текст, который отображается под компонентом
9 Тип значения type string Позволяет выбрать предустановку значения
10 Значение value string Значение будет предустановлено
11 Отображение компонента в повторяющихся блоках RepeatableFields onlyFirstScreen boolean Можно выбрать отображение только в первом блоке или наоборот. Если оставить выпадающий список пустым, то компонент будет отображаться во всех блоках компонента RepeatableFields
12 Условие сравнения с заданной датой condition string Предназначена для установления ограничений, не позволяющих выбрать дату вне заданного периода
13 Ссылка/Постоянная величина type string Атрибуты, позволяющие указать ограничение в вводе даты. type может принимать одно из двух значений:
  • const — постоянная величина, например, today
  • ref — ссылка на другой компонент dateInput услуги
14 Значение value string Граничное значение, ограничивающее выбор даты
15 Тип валидации type string Позволяет выбрать один из типов валидации:
  • Минимальная дата
  • Максимальная дата
  • Регулярное выражение
  • Валидация ручного ввода при заданных ограничениях
16 Операция сравнения condition string Критерий или условие осуществления сравнения
17 Сообщение об ошибке errorMsg string Позволяет указать текст, который отображается пользователю в случае, если значение не соответствует правилу валидации
18 Точность сравнения accuracy string Задаётся точность сравнения дат для элементов типа минимальная дата (minDate), максимальная дата (maxDate) в блоке правила валидации (validation). Возможные значения:
  • день
  • месяц
  • год
19 Зависимости с ранее введёнными данными fields array Массив объектов, в элементах которых описываются зависимости и правила отображения полей
20 Название поля, в которое запишется введённое значение на циклических экранах fields array Используется для сохранения значения в поле элемента спискового компонента, обрабатываемого в цикле
21 Модальные окна с пояснением clarifications object, array Позволяет раскрыть блок «Настроить модальное окно с пояснением вручную» или сделать список ссылок на пояснительные переходы
22 Настроить модальное окно с пояснением вручную acceptableTypes additionalProperties Позволяет настроить модальные окна
23 Настройка формирования health-метрик healthList array Задаётся список событий компонента, по которым будут формироваться health-запросы
24 Идентификатор подсказки suggest suggestionId string Механизм отображения пользователю набора подходящих для ввода данных и автоматическое заполнение полей формы этими данными
25 Вычисляемые аргументы компонента (linkedValues) linkedValues array Атрибуты компонента, позволяющие реализовать сложный функционал

Пример JSON структуры компонента передаваемой в DTO

{

    "visited": true,

    "value": "2024-10-12T00:00:00.000+03:00",

    "disabled": false

  }

Варианты использования

Часто встречающимся вариантом использования двух компонентов DateInput является указание отрезка времени «с» — «по». В этом случае можно настроить компоненты так, чтобы дата окончания не была раньше, чем дата начала

Для такой реализации потребуется настройка компонента, в котором указывается дата окончания. Используется блок «Ограничение на выбор даты в календаре» а сама настройка выглядит следующим образом

Рисунок8.png

Авторизуйтесь, чтобы оставить комментарий к статье